<template>
	<view class="main-content">
		<!-- 导航栏 -->
		<u-navbar :is-fixed="true" :is-back="false" :border-bottom="false" :background="navbarBackground">
			<!-- 定位区域 -->
			<view class="map-wrap ml20 mr20 row-between">
				<view class="logo-display-area">
					<image :src="getCloudResourceSite('index/logo.png')" style="width:240rpx;height:60rpx;"></image>
				</view>
				<view class="serach-display-area ml20 mr20">
					<u-search shape="round" wrap-bg-color="transparent" placeholder="搜索" :bg-color="'#fff'" :disabled="true" :height="60" style="width: 100%;"></u-search>
				</view>
			</view>
		</u-navbar>
		<!-- 轮播 -->
		<swipers :pid="1" height="340rpx" padding="0 20rpx 0 20rpx"></swipers>
		<view style="height: 270rpx;position: relative;" v-if="czggzt">
			<u-icon name="close" size="36" color="#ddd" style="position: absolute;right: 15px;top: 15px;z-index: 1;" @click="czggzt = false"></u-icon>
			<swipers :pid="2" height="270rpx" :isSwiper="false" @statusMonitor="statusMonitor"></swipers>
		</view>
		<!-- 导航入口 -->
		<view class="nav ml20 mr20" v-bind:class="{'mt20':!czggzt}" v-if="navList.length">
			<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
				<swiper-item v-for="(items, index) in navList" :key="index">
					<view class="nav-list row wrap">
						<view v-for="(item, index2) in items" :key="index2" @tap="tapMenu(item)"
							class="nav-item column-center">
							<image class="nav-icon" :src="item.image"></image>
							<view class="name nr bold">{{item.name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots" v-if="navList.length > 1">
				<view v-for="(item, index) in navList" :key="index"
					:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
			</view>
		</view>
		<!-- 公告-->
		<navigator v-if="news.length" class="information row bg-white mt20 mb20 ml20 mr20" hover-class="none" open-type="navigate" url="/pages/news_list/news_list">
			<image :src="getCloudResourceSite('index/news_title_img.png')" style="width:180rpx;height:46rpx;" class="ml20 mr10"></image>
			<view class="news flex1">
				<view class="shade"></view>
				<swiper autoplay="true" style="height: 76rpx; flex: 1" vertical="true" circular="true" :interval="3000">
					<swiper-item v-for="(item, index) in news" :key="index" class="row">
						<view class="flexnone">
							<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
								mode="plain" />
						</view>
						<view class="text-swiper ml10 line1">{{item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <image class="icon-sm ml20" src="/static/images/arrow_right.png" /> -->
		</navigator>
		<view class="ml20 mr20 row-between"  @click="goPage('/pages/bundle/product_list/product_list?merchant_id=3')">
			<image :src="getCloudResourceSite('index/shop-title-bg.png')" style="width:180rpx;height:46rpx;" class="ml20 mr10"></image>
			<text class="xs" style="color: #C3C3C3;">更多></text>
		</view>
		<view class="activity-area">
			<u-row>
				<u-col span="6" style="position: relative;">
					<view class="nr bold" style="position: absolute;display: inline-block;top:0;z-index: 1;padding: 1px 10px;background: #FFCE26;border-radius: 10px 0 15px 0;color: #fff;">
						特别推荐
					</view>
					<image :src="getCloudResourceSite('index/recommend-icon.png')" style="width: 70rpx;height: 70rpx;position: absolute;top: -10px;right: 0;z-index: 1;"></image>
					<swipers :pid="3" height="330rpx" :radius="'20rpx'"></swipers>
					<view class="xxs" style="position: absolute;display: inline-block;bottom:0;z-index: 1;padding: 0 7px;background: #F6F6F6;border-radius: 0 10px 0 10px;color: #8e8e8e;">
						广告
					</view>
				</u-col>
				<u-col span="6">
					<swipers :pid="4" height="160rpx" :isSwiper="false"></swipers>
					<swipers :pid="5" height="160rpx" class="mt20" :isSwiper="false"></swipers>
				</u-col>
			</u-row>
			<view class="recommend-commodities" v-if="homePageRecommendProducts.length >= 1">
				<swiper :autoplay="true" :style="'height:' + homePageRecommendProductsSwiperH + 'rpx;'">
					<swiper-item v-for="(val, key) in homePageRecommendProducts" :key="key">
						<u-row>
							<u-col span="4" v-for="(v, k) in val" :key="k" @click="goPage('/pages/product_details/product_details?id=' + v.id)">
								<u-image width="100%" height="115px" class="mt20" :border-radius="10" mode="scaleToFill" :src="v.image"></u-image>
								<view class="bold md mt10 line1" v-html="v.name"></view>
								<view class="mt10">
									<view class="bold sm line1" v-text="v.product_item[0].market_price + '福利价'" style="color: #FF3030;margin-bottom: 6rpx;"></view>
									<view class="bold xs line1" v-text="v.sales_sum + '人付款'" style="color: #DCDCDC;"></view>
								</view>
							</u-col>
						</u-row>
					</swiper-item>
				</swiper>
				<view class="dots" v-if="homePageRecommendProducts.length > 1">
					<view v-for="(item, index) in homePageRecommendProducts" :key="index"
						:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
				</view>
			</view>
		</view>
		<view class="circle-of-friends" v-if="false">
			<view class="mt20 mb20 ml20 mr20">
				<u-image width="180rpx" height="46rpx" mode="scaleToFill" :src="getCloudResourceSite('index/circle_of_friends_title_img.png')"></u-image>
			</view>
			<view class="lists mt20 mb20 ml20 mr20">
				<view class="item bg-white mb20 br10" v-for="(v,k) in circleOfFriendsLists" @click="goPage('/pages/bundle/article_info_details/article_info_details?id=' + v.id)">
					<view class="user-information row">
						<u-avatar :src="v.user_avatar" class="mt20 ml20" size="mini"></u-avatar>
						<view class="mt20 ml10 bold" v-html="v.user_nick_name"></view>
					</view>
					<view class="content-synopsis mt20 ml20 mr20 line2" v-html="v.content"></view>
					<view class="prcture-display-area">
						<view v-if="v.cover_images != null && v.cover_images.length == 1">
							<u-image width="calc(100% - 40rpx)" height="158px" class="mt20 ml20 mr20" :border-radius="10" mode="aspectFill" :src="val.url" v-for="(val,key) in v.cover_images"></u-image>
						</view>
						<view v-else>
							<u-row>
								<u-col span="4"  v-for="(val,key) in v.cover_images">
									<u-image width="100%" height="115px" class="mt20" :border-radius="10" mode="aspectFill" :src="val.url"></u-image>
								</u-col>
							</u-row>
						</view>
					</view>
					<view class="mt20 ml20 row">
						<u-icon name="eye" class="mr10" :size="38" color="#CDCDCD"></u-icon>
						<text style="color: #CDCDCD;" v-text="v.check_count"></text>
						<u-icon name="chat" class="ml20 mr10" :size="38" color="#CDCDCD"></u-icon>
						<text style="color: #CDCDCD;" v-text="v.comment_count"></text>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="officialAccountsPopupStatus" mode="center" width="300px" height="350px" :mask-close-able="false">
			<view class="officialAccountsPopupContent">
				<view class="top-operation-area">
					<u-icon name="close" color="#909399" size="30" @click="popupClose"></u-icon>
				</view>
				<text class="title">关注公众号，不迷路</text>
				<u-image width="200px" height="200px" style="margin: 2vh auto 0;" mode="widthFix"
					src="https://image.leyuanyinyong.cn/uploads/images/20210708191454dfce31023.jpg"></u-image>
				<text class="hint">长按识别二维码，关注公众号</text>
			</view>
		</u-popup>
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import {
		getHome,
		getMenu,
		getHomePageRecommendProducts,
		positioningAnalysis,
	} from '@/api/store';
	import {
		list
	} from '@/api/circleOfFriends';
	import {
		toLogin
	} from '@/utils/login'
	import {
		getUserCheckForConcern
	} from '@/api/user';
	import {
		loadingFun,
		menuJump,
		arraySlice,
		isWeixinClient,
		setTabbar
	} from '@/utils/tools'
	export default {
		data() {
			return {
				czggzt:true,
				currentSwiper:0,
				address:'定位中'
				,navbarSearchDisplayStatus:false
				,navbarBackground: {
					backgroundImage : 'url(' + this.getCloudResourceSite('index/index-bg.png') + ')'
				}
				,searchInputContent:''
				,navList: []
				,navSwiperH:0
				,officialAccountsPopupStatus:false
				,news: []
				,circleOfFriendsLists:[]
				,homePageRecommendProducts:[]
				,homePageRecommendProductsSwiperH:0
				,userSiteInformation:[]
				,page:1
				,circleOfFriendsDataStatus:'loadmore'
			}
		},
		async onLoad(options) {
			setTabbar()
			await this.getMenuFun()
			this.locationFor()
			// #ifdef H5
			if (isWeixinClient()) {
				getUserCheckForConcern().then(res => {
					if (res.code == -1) {
						_this.officialAccountsPopupStatus = true;
					} else if (res.code == 1) {
						if (res.data.subscribe == 0) {
							_this.officialAccountsPopupStatus = true;
						}
					}
				})
			}
			// #endif
		},
		async onShow() {
			await this.getHomeFun()
			this.getHomePageRecommendProductsFun();
			this.circleOfFriendsListsFun();
		},
		methods:{
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				uni.stopPullDownRefresh()
				if (code == 1) {
					//   截取数组
					if (data.length <= 5) {
						this.navSwiperH = 140
					} else {
						this.navSwiperH = 346 // 374
					}
					this.navList = arraySlice(data);
				}
			},
			async tapMenu(item) {
				if (!this.isLogin) return toLogin()
				menuJump(item)
			},
			locationFor(){
				var _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						positioningAnalysis({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(returnData => {
								if (returnData.code == 1) {
									_this.userSiteInformation = returnData.data;
									_this.address = returnData.data.address_component.province;
									
								} else {
									_this.address = '定位失败';
								}
							}
						)
					},
					fail: function(returnData) {
						_this.address = '定位失败';
					}
				});
			},
			getHomePageRecommendProductsFun(){
				var _this = this;
				getHomePageRecommendProducts().then(res =>{
					if(res.code == 1){
						if (res.data[0].length <= 2) {
							_this.homePageRecommendProductsSwiperH = 374;
						} else {
							_this.homePageRecommendProductsSwiperH = 770 // 374
						}
						
						_this.homePageRecommendProducts = res.data;
					}
				})
			},
			popupClose() {
				var _this = this;
				getUserCheckForConcern().then(res => {
					if (res.code == -1) {
						_this.officialAccountsPopupStatus = false;
					} else if (res.code == 1) {
						if (res.data.subscribe == 0) {
							_this.$toast({
								title: "请关注公众号"
							});
							_this.officialAccountsPopupStatus = true;
						} else {
							_this.officialAccountsPopupStatus = false;
						}
					}
				})
			},
			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				})
			},
			circleOfFriendsListsFun(){
				var _this = this;
				if(_this.circleOfFriendsDataStatus == 'loadmore'){
					_this.circleOfFriendsDataStatus = 'loading'
				}
				list({
					// province: _this.userSiteInformation.address_component.province,
					// city: _this.userSiteInformation.address_component.city,
					page:_this.page,
					limit:10
				}).then(res =>{
					if(res.code == 1){
						_this.page ++;
						if(_this.page * 10 > res.data.count){
							_this.circleOfFriendsDataStatus = 'nomore';
						}
						for(var key in res.data.lists){
							_this.circleOfFriendsLists.push(res.data.lists[key])
						}
						_this.circleOfFriendsDataStatus = 'loadmore';
					}
				})
			},
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				uni.stopPullDownRefresh()
				if (code == 1) {
					const {
						news
					} = data;
					this.news = news
				}
			},
			statusMonitor(status){
				this.czggzt = status;
			}
		}
	}
</script>

<style lang="scss">
	.w100{
		width: 100%;
	}
	.b-1795fa{
		border: 1px solid #1795fa;
	}
	
	.main-content{
		background-image: url($u-resource-imgaes-url + 'index/index-bg.png');
		background-size: 100% 300rpx;
		background-repeat: no-repeat;
		.map-wrap {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 26rpx;
			border-radius: 100rpx;
			margin-left: 20rpx;
			flex: 1;
			.left-content{
				// width: 40%;
				.map-wrap-text {
					color:#ffffff;
					padding: 0 6rpx;
					overflow: hidden;
					white-space: nowrap;
					word-break: keep-all;
					text-overflow: ellipsis;
				}
				
				.arrow-down{
					margin-top: 8rpx;
				}
			}
			
		}
		// 搜索
		.search-area{
			border-radius: 50px;
			
			.search-scan-icon{
				padding: 10rpx 20rpx 10rpx 20rpx;
			}
			
			
			.search-divider{
				width: 2rpx;
				background-color: rgba(162,162,162,.5) !important;
			}
			
			.search-input{
				display: inline-block;
				
			}
			
			.search-virtual-buttons{
				color: #ffffff;
				margin-right: 6rpx;
				padding: 6rpx 26rpx;
				display: inline-block;
				border-radius: 100rpx;
				background-color: #1795fa;
			}
		}
		// 导航
		.nav {
			position: relative;
			border-radius: 14rpx;
		
			.nav-item {
				width: 25%;
				// margin-top: 30rpx;
		
				.nav-icon {
					width: 82rpx;
					height: 82rpx;
					margin-bottom: 15rpx;
				}
			}
		
			.dots {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
				display: flex;
		
				.dot {
					width: 10rpx;
					height: 6rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
					background-color: rgba(255, 44, 60, 0.4);
		
					&.active {
						width: 20rpx;
						background-color: $-color-primary;
					}
				}
		
			}
		}
		.information{
			border-radius: 20rpx;
		}
		// 甄选活动
		.activity-area {
			background-color: #ffffff;
			height: auto;
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 20rpx 20rpx;
			
			.identification{
				width: 144rpx;
				height: 41rpx;
			}
			
			.one{
				width: 40%;
				
				.styleOne{
					height: 380rpx;
					width: 100%;
				}
			}
			.tow{
				width: 60%;
				
				.styleTow{
					height: 185rpx;
					width: 100%;
					
					&:first-child{
						margin-bottom: 10rpx;
					}
				}
			}
		}
		
		// 朋友圈
		.circle-of-friends{
			
			.lists{
				
				.item{
					padding-bottom: 20rpx;
					
					
				}
			}
		}
	}

</style>
